import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { Upload, Edit3, Save, Share2, Download, Star, Users, TrendingUp, Award, Plus, FileText, Music, Video, Image } from 'lucide-react'

const CreatorCenter = () => {
  const [activeTab, setActiveTab] = useState('my-works')
  const [isCreating, setIsCreating] = useState(false)

  const tabs = [
    { id: 'my-works', name: '我的作品', icon: FileText },
    { id: 'templates', name: '创作模板', icon: Edit3 },
    { id: 'collaborations', name: '协作项目', icon: Users },
    { id: 'analytics', name: '数据分析', icon: TrendingUp }
  ]

  const userWorks = [
    {
      id: 1,
      title: '现代版贵妃醉酒',
      type: 'AI京歌',
      status: 'published',
      views: 1250,
      likes: 89,
      shares: 23,
      createdAt: '2024-01-15',
      thumbnail: '🎵',
      description: '融合电子音乐元素的现代京剧作品'
    },
    {
      id: 2,
      title: '霸王别姬互动剧本',
      type: '情景剧本',
      status: 'draft',
      views: 0,
      likes: 0,
      shares: 0,
      createdAt: '2024-01-20',
      thumbnail: '🎭',
      description: '沉浸式互动体验剧本，包含多分支剧情'
    },
    {
      id: 3,
      title: '京剧脸谱设计集',
      type: '视觉设计',
      status: 'published',
      views: 2100,
      likes: 156,
      shares: 45,
      createdAt: '2024-01-10',
      thumbnail: '🎨',
      description: '现代风格的京剧脸谱设计作品集'
    }
  ]

  const templates = [
    {
      id: 1,
      name: 'AI京歌创作模板',
      description: '标准化的京歌创作流程模板',
      category: '音乐创作',
      icon: Music,
      usage: 1250,
      rating: 4.8
    },
    {
      id: 2,
      name: '情景剧本模板',
      description: '互动式京剧剧本创作模板',
      category: '剧本创作',
      icon: FileText,
      usage: 890,
      rating: 4.6
    },
    {
      id: 3,
      name: '视觉设计模板',
      description: '国潮风格设计元素模板',
      category: '视觉设计',
      icon: Image,
      usage: 2100,
      rating: 4.9
    }
  ]

  const collaborations = [
    {
      id: 1,
      name: '京剧现代化项目',
      participants: 8,
      status: 'active',
      progress: 75,
      deadline: '2024-03-15'
    },
    {
      id: 2,
      name: 'AI京歌算法优化',
      participants: 5,
      status: 'active',
      progress: 45,
      deadline: '2024-02-28'
    }
  ]

  const analytics = {
    totalViews: 12500,
    totalLikes: 890,
    totalShares: 234,
    monthlyGrowth: 15.6,
    topWorks: userWorks.slice(0, 3),
    achievements: [
      { name: '创作达人', icon: Award, earned: true },
      { name: '社区贡献者', icon: Users, earned: true },
      { name: '创新先锋', icon: Star, earned: false }
    ]
  }

  return (
    <div className="min-h-screen pt-16 theme-creator">
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Header */}
        <motion.div
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="text-6xl font-bold jing-text-gradient mb-6 jing-title text-shadow-xl">
            创作者中心
          </h1>
          <p className="text-xl text-white/80 max-w-3xl mx-auto jing-content">
            🎨 释放您的创造力，在京剧文化创新平台上展现才华
          </p>
        </motion.div>

        {/* 创作工具栏 */}
        <motion.div
          className="jing-card mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          <div className="flex flex-wrap gap-4 justify-center">
            <button className="jing-button flex items-center space-x-2">
              <Plus size={20} />
              <span>AI京歌创作</span>
            </button>
            <button className="glass-effect px-6 py-3 rounded-lg text-white hover:bg-white/20 transition-all flex items-center space-x-2">
              <FileText size={20} />
              <span>剧本编辑器</span>
            </button>
            <button className="glass-effect px-6 py-3 rounded-lg text-white hover:bg-white/20 transition-all flex items-center space-x-2">
              <Image size={20} />
              <span>视觉设计</span>
            </button>
            <button className="glass-effect px-6 py-3 rounded-lg text-white hover:bg-white/20 transition-all flex items-center space-x-2">
              <Video size={20} />
              <span>视频制作</span>
            </button>
          </div>
        </motion.div>

        {/* 标签页导航 */}
        <motion.div
          className="jing-card mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.3 }}
        >
          <div className="flex space-x-1 bg-white/10 p-1 rounded-lg">
            {tabs.map((tab) => {
              const Icon = tab.icon
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex-1 flex items-center justify-center space-x-2 py-3 px-4 rounded-lg transition-all duration-300 ${
                    activeTab === tab.id
                      ? 'bg-jing-red text-white'
                      : 'text-white/70 hover:text-white hover:bg-white/10'
                  }`}
                >
                  <Icon size={18} />
                  <span>{tab.name}</span>
                </button>
              )
            })}
          </div>
        </motion.div>

        {/* 内容区域 */}
        <div className="grid lg:grid-cols-3 gap-8">
          {/* 主要内容 */}
          <div className="lg:col-span-2">
            {activeTab === 'my-works' && (
              <motion.div
                className="space-y-6"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
              >
                <div className="flex justify-between items-center mb-6">
                  <h2 className="text-2xl font-bold text-white">我的作品</h2>
                  <button className="jing-button flex items-center space-x-2">
                    <Upload size={18} />
                    <span>上传新作品</span>
                  </button>
                </div>

                <div className="grid gap-6">
                  {userWorks.map((work, index) => (
                    <motion.div
                      key={work.id}
                      className="jing-card group cursor-pointer"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6, delay: index * 0.1 }}
                      whileHover={{ y: -5 }}
                    >
                      <div className="flex items-start space-x-4">
                        <div className="w-16 h-16 jing-gradient rounded-xl flex items-center justify-center text-2xl">
                          {work.thumbnail}
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center justify-between mb-2">
                            <h3 className="text-xl font-bold text-white group-hover:text-jing-red transition-colors">
                              {work.title}
                            </h3>
                            <span className={`px-3 py-1 rounded-full text-sm ${
                              work.status === 'published' 
                                ? 'bg-green-500/20 text-green-400' 
                                : 'bg-yellow-500/20 text-yellow-400'
                            }`}>
                              {work.status === 'published' ? '已发布' : '草稿'}
                            </span>
                          </div>
                          <p className="text-white/70 mb-3">{work.description}</p>
                          <div className="flex items-center space-x-6 text-sm text-white/60">
                            <span className="flex items-center space-x-1">
                              <TrendingUp size={14} />
                              <span>{work.views} 浏览</span>
                            </span>
                            <span className="flex items-center space-x-1">
                              <Star size={14} />
                              <span>{work.likes} 点赞</span>
                            </span>
                            <span className="flex items-center space-x-1">
                              <Share2 size={14} />
                              <span>{work.shares} 分享</span>
                            </span>
                          </div>
                        </div>
                        <div className="flex flex-col space-y-2">
                          <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                            <Edit3 size={16} className="text-white" />
                          </button>
                          <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                            <Share2 size={16} className="text-white" />
                          </button>
                          <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                            <Download size={16} className="text-white" />
                          </button>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )}

            {activeTab === 'templates' && (
              <motion.div
                className="space-y-6"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
              >
                <h2 className="text-2xl font-bold text-white mb-6">创作模板</h2>
                <div className="grid md:grid-cols-2 gap-6">
                  {templates.map((template, index) => {
                    const Icon = template.icon
                    return (
                      <motion.div
                        key={template.id}
                        className="jing-card group cursor-pointer"
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6, delay: index * 0.1 }}
                        whileHover={{ y: -5 }}
                      >
                        <div className="flex items-start space-x-4">
                          <div className="w-12 h-12 jing-gradient rounded-lg flex items-center justify-center">
                            <Icon size={24} className="text-white" />
                          </div>
                          <div className="flex-1">
                            <h3 className="text-lg font-bold text-white mb-2">{template.name}</h3>
                            <p className="text-white/70 mb-3">{template.description}</p>
                            <div className="flex items-center justify-between text-sm text-white/60">
                              <span>{template.usage} 次使用</span>
                              <div className="flex items-center space-x-1">
                                <Star size={14} className="text-jing-gold" />
                                <span>{template.rating}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </motion.div>
                    )
                  })}
                </div>
              </motion.div>
            )}

            {activeTab === 'collaborations' && (
              <motion.div
                className="space-y-6"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
              >
                <h2 className="text-2xl font-bold text-white mb-6">协作项目</h2>
                <div className="space-y-4">
                  {collaborations.map((collab, index) => (
                    <motion.div
                      key={collab.id}
                      className="jing-card"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6, delay: index * 0.1 }}
                    >
                      <div className="flex items-center justify-between mb-4">
                        <h3 className="text-xl font-bold text-white">{collab.name}</h3>
                        <span className={`px-3 py-1 rounded-full text-sm ${
                          collab.status === 'active' 
                            ? 'bg-green-500/20 text-green-400' 
                            : 'bg-gray-500/20 text-gray-400'
                        }`}>
                          {collab.status === 'active' ? '进行中' : '已完成'}
                        </span>
                      </div>
                      <div className="space-y-3">
                        <div className="flex items-center justify-between text-sm text-white/70">
                          <span>参与人数: {collab.participants}</span>
                          <span>截止日期: {collab.deadline}</span>
                        </div>
                        <div className="space-y-2">
                          <div className="flex justify-between text-sm text-white/70">
                            <span>进度</span>
                            <span>{collab.progress}%</span>
                          </div>
                          <div className="w-full bg-white/20 rounded-full h-2">
                            <div 
                              className="h-full jing-gradient rounded-full transition-all duration-500"
                              style={{ width: `${collab.progress}%` }}
                            ></div>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )}

            {activeTab === 'analytics' && (
              <motion.div
                className="space-y-6"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
              >
                <h2 className="text-2xl font-bold text-white mb-6">数据分析</h2>
                
                {/* 数据概览 */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                  <div className="jing-card text-center">
                    <div className="text-3xl font-bold jing-text-gradient mb-2">{analytics.totalViews}</div>
                    <div className="text-white/70">总浏览</div>
                  </div>
                  <div className="jing-card text-center">
                    <div className="text-3xl font-bold jing-text-gradient mb-2">{analytics.totalLikes}</div>
                    <div className="text-white/70">总点赞</div>
                  </div>
                  <div className="jing-card text-center">
                    <div className="text-3xl font-bold jing-text-gradient mb-2">{analytics.totalShares}</div>
                    <div className="text-white/70">总分享</div>
                  </div>
                  <div className="jing-card text-center">
                    <div className="text-3xl font-bold text-green-400 mb-2">+{analytics.monthlyGrowth}%</div>
                    <div className="text-white/70">月增长</div>
                  </div>
                </div>

                {/* 成就系统 */}
                <div className="jing-card">
                  <h3 className="text-xl font-bold text-white mb-4">成就徽章</h3>
                  <div className="grid grid-cols-3 gap-4">
                    {analytics.achievements.map((achievement, index) => {
                      const Icon = achievement.icon
                      return (
                        <div key={index} className={`p-4 rounded-lg text-center ${
                          achievement.earned 
                            ? 'bg-jing-gold/20 border border-jing-gold/50' 
                            : 'bg-white/10 border border-white/20'
                        }`}>
                          <Icon size={32} className={`mx-auto mb-2 ${
                            achievement.earned ? 'text-jing-gold' : 'text-white/40'
                          }`} />
                          <div className={`text-sm font-medium ${
                            achievement.earned ? 'text-jing-gold' : 'text-white/60'
                          }`}>
                            {achievement.name}
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              </motion.div>
            )}
          </div>

          {/* 侧边栏 */}
          <motion.div
            className="space-y-6"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            {/* 快速创作 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">快速创作</h3>
              <div className="space-y-3">
                <button className="w-full jing-button text-left">
                  <Music size={18} className="inline mr-2" />
                  AI京歌生成
                </button>
                <button className="w-full glass-effect px-4 py-3 rounded-lg text-white hover:bg-white/20 transition-all text-left">
                  <FileText size={18} className="inline mr-2" />
                  剧本创作
                </button>
                <button className="w-full glass-effect px-4 py-3 rounded-lg text-white hover:bg-white/20 transition-all text-left">
                  <Image size={18} className="inline mr-2" />
                  视觉设计
                </button>
              </div>
            </div>

            {/* 创作统计 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">创作统计</h3>
              <div className="space-y-4">
                <div className="flex justify-between">
                  <span className="text-white/70">本月创作</span>
                  <span className="text-white font-semibold">12 件</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-white/70">总作品数</span>
                  <span className="text-white font-semibold">45 件</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-white/70">获得点赞</span>
                  <span className="text-white font-semibold">1,234 个</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-white/70">创作等级</span>
                  <span className="text-jing-gold font-semibold">高级创作者</span>
                </div>
              </div>
            </div>

            {/* 社区动态 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">社区动态</h3>
              <div className="space-y-3">
                <div className="p-3 glass-effect rounded-lg">
                  <div className="text-sm text-white/80 mb-1">新用户关注了您</div>
                  <div className="text-xs text-white/60">2小时前</div>
                </div>
                <div className="p-3 glass-effect rounded-lg">
                  <div className="text-sm text-white/80 mb-1">您的作品被收藏</div>
                  <div className="text-xs text-white/60">5小时前</div>
                </div>
                <div className="p-3 glass-effect rounded-lg">
                  <div className="text-sm text-white/80 mb-1">收到新的协作邀请</div>
                  <div className="text-xs text-white/60">1天前</div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  )
}

export default CreatorCenter


